<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<META content="text/html; charset=ISO-8859-2" http-equiv="content-type">
<meta name="robots" content="index,follow">
<META NAME="Keywords" CONTENT="converting files to hex, online converter, javascript">
<meta name="viewport" content="width=device-width, initial-scale=1">
<META NAME="Author" CONTENT="Tomasz Ostrowski">
<META name="description" content="On-line file to hexadecimal array converter.">  
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 959px)" href="./css/mobile.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width: 960px)" href="./css/main.css" />
<script type="text/javascript" src="./js/tree.js"></script>


<script src="./js/jquery-2.1.3.min.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="./css/jquery-eu-cookie-law-popup.css"/>
<script src="./js/jquery-eu-cookie-law-popup-en.js"></script> -->

<title>File to hex converter</title>  
</head>
<body class="eupopup eupopup-bottomleft eupopup-style-compact">

<div id="wrap">
<div id="header">
<div id="header_l">
  <a href="../index.htm">erma0.cn</a>
</div>
<div id="header_r"><A HREF="./file_to_hex.htm" TARGET="_self"><strong>ENGLISH VERSION</strong></A><br><A HREF="./file_to_hex.php?lang=pl" TARGET="_self"><strong>WERSJA POLSKA</strong></A></div>      
</div>

<a href="../bot-trap/">
  <img src="./images/pixel.gif" border="0" alt=" " width="1" height="1">
</a>
     


<div id="main">

	<h1>File to hexadecimal converter</h1>
      <p>Client-side (javascript, no data is sent to server) file to hexadecimal code conversion.
		Be careful with files &gt; 1 MB (possible high resource consumption, e.g. Chromium 46 has serious problems when loading few MB of text into textarea, offline tools might be better for large files).	  
	  </p>
	  <form name="frmConvert" action="">
        <p>Options:</p>
          <p>
		  <input type="checkbox" name="chbSeparator" value="sep" checked="yes">Use 0x and comma as separator (C-like) 
		  <br>
			<input type="checkbox" name="chbNewline" value="newline" checked="yes">Insert newlines after each 16B		  
		  </p>
		<p>
		File: 
		<input type="file" name="fileinput" onchange='openFile(event)' /> or
        <span id="drop_zone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event);" style="border: 15px solid darkgray; text-align:center; vertical-align:middle;">
          <strong>drop file here</strong>
        </span>       
		</p>        

			  </p>		  
				<p>Output:</p>
			    <p>
				<textarea name="ed_output" rows="10" cols="87" style="width: 700px;"></textarea>				
                <br>
                <br>
                <button type="button" name="btnCopyOutputToClipboard" onclick="copyOutputToClipboard()">Copy output to clipboard</button>
				</p>			    
			</form>
      <p>
      See also:
      <br>
      <a href="http://erma0.cn/bin/bin2hex/bin2hex.exe">bin2hex.exe for Windows</a>
      or <a href="http://erma0.cn/bin/bin2hex/bin2hex">bin2hex for Linux</a>
      (<a href="http://erma0.cn/bin/bin2hex/bin2hex.c">source, bin2hex.c</a>).
      <br>
      bin2hex with added options to write hex only and to specify wrapping length: <a href="http://erma0.cn/bin/bin2hex/20190615/bin2hex.exe">bin2hex.exe</a> (<a href="http://erma0.cn/bin/bin2hex/20190615/bin2hex.c">bin2hex.c</a>)
      </p>   
  </div>
<script type="text/javascript">
//<!--
    var hD='0123456789ABCDEF';
    function dec2hex(d) {
        var h = hD.substr(d&15,1);
        while (d>15) {
            d>>=4;
            h=hD.substr(d&15,1)+h;
        }
        return h;
    }    
    
	var uint8View;
	
    function Convert() {	
			var hexText = "";
			var separator1 = "", separator2 = "";
			var newline = document.frmConvert.chbNewline.checked;
			if (document.frmConvert.chbSeparator.checked)
			{
			  separator1 = "0x";
			  separator2 = ", "
			}			
			for (i=0; i<uint8View.length; i++) {
			  var charVal = uint8View[i];
			  hexText = hexText + separator1 + (charVal<16?"0":"") + dec2hex(charVal);
			  if (i < uint8View.length - 1) {
			    hexText += separator2;
			  }
				if (newline) {
					if ((i%16) == 15) {
						hexText += "\n";
					}
				}
			}
			document.frmConvert.ed_output.value = hexText;		  	
    }

    function copyOutputToClipboard() {
        var target = document.frmConvert.ed_output;
        // https://stackoverflow.com/questions/51158061/copy-data-to-clipboard-without-selecting-any-text
        // - restoring original selection doesn't seem to work        
        var origSelectionStart, origSelectionEnd;
        origSelectionStart = target.selectionStart;
        origSelectionEnd = target.selectionEnd;
        // select the content
        var currentFocus = document.activeElement;
        target.focus();
        target.setSelectionRange(0, target.value.length);
        var succeed;
        try {
            succeed = document.execCommand("copy");
        } catch(e) {
            succeed = false;
        }
        // restore original focus
        if (currentFocus && typeof currentFocus.focus === "function") {
            currentFocus.focus();
        }
        // restore prior selection
        target.setSelectionRange(origSelectionStart, origSelectionEnd);                        
    }

    function readFileAsArray(file) {
        var reader = new FileReader();
        reader.onload = function(){
          //var text = reader.result;
		  var arr = reader.result;
		  uint8View = new Uint8Array(arr);	  
          Convert();          	  
        };
        reader.readAsArrayBuffer(file);    
    }    

    var openFile = function(event) {
        var input = event.target;
        readFileAsArray(input.files[0]);
    };
      
    function drop_handler(ev) {
        ev.preventDefault();
        // If dropped items aren't files, reject them
        var dt = ev.dataTransfer;
        if (dt.items) {
            // Use DataTransferItemList interface to access the file(s)
            for (var i = 0; i < dt.items.length; i++) {
                if (dt.items[i].kind == "file") {
                    var f = dt.items[i].getAsFile();
                    readFileAsArray(f);
                    break;
                }
            }
        } else {
            // Use DataTransfer interface to access the file(s)
            for (var i = 0; i < dt.files.length; i++) {
                readFileAsArray(dt.files[i]);
                break;
            }
        }
    }

    function dragover_handler(ev) {
        // Prevent default select and drag behavior
        ev.preventDefault();
    }

    function dragend_handler(ev) {
        // Remove all of the drag data
        var dt = ev.dataTransfer;
        if (dt.items) {
            // Use DataTransferItemList interface to remove the drag data
            for (var i = 0; i < dt.items.length; i++) {
                dt.items.remove(i);
            }
        } else {
            // Use DataTransfer interface to remove the drag data
            ev.dataTransfer.clearData();
        }
    }                     


//-->
</script>


<div id="sidebar">
<h3>Sitemap</h3>

<ul id="tree0" class="tree">

    <li ><a>PROJECTS</a>
    <ul>
    <li><A HREF="../programator.htm" TARGET="_self">FLASH 49F programmer</A></li> 
    </ul>
    </li>

 
    <li><a>ONLINE TOOLS</a>
    <ul>
    <li><a href="./base64.htm" TARGET="_self">Base64 -&gt; HEX</A></li>
    <li><a href="./base32.htm" TARGET="_self">Base32 -&gt; HEX</a></li>
    <li><a href="./base32hex.htm" TARGET="_self">Base32hex -&gt; HEX</a></li>
    <li><a href="./ascii.htm" TARGET="_self">ASCII -&gt; HEX</a></li>
    <li><a href="./ascii_uN.htm" TARGET="_self">ASCII -&gt; u16/u32/u64 HEX</a></li>            
    <li><a href="./hex_to_base64.htm" TARGET="_self">HEX -&gt; Base64</a></li>
    <li><a href="./text_to_base64.htm" TARGET="_self">Text -&gt; Base64</a></li>
    <li><a href="./hex_to_base32.htm" TARGET="_self">HEX -&gt; Base32</a></li>
    <li><a href="./hex_to_base32hex.htm" TARGET="_self">HEX -&gt; Base32hex</a></li>
    <li><a href="./hex_to_ascii.htm" TARGET="_self">HEX -&gt; ASCII</a></li>
    <li><a href="./hex_to_dec.htm" TARGET="_self">HEX -&gt; DEC</a></li>	
    <li><a href="./dec_to_ascii.htm" TARGET="_self">DEC -&gt; ASCII</a></li>
    <li><a href="./bin_to_32bit_hex.htm" TARGET="_self">BIN &lt;-&gt; 32-bit hex</a></li>    
    <li><a href="./md5.htm" TARGET="_self">MD5 calculator</a></li>
    <li><a href="./sha1.htm" TARGET="_self">SHA1 calculator</a></li>    
    <li><a href="./regexp.htm" TARGET="_self">Regular exp.</a></li>
    <li><a href="./cpp_text_escape.htm" TARGET="_self">Text -&gt; Cpp</a></li>
    <li><a href="./cpp_unescape.htm" TARGET="_self">Cpp -&gt; text</a></li>
    <li><a href="./pascal_escape.htm" TARGET="_self">Text -&gt; Pascal</a></li>        
    <li><a href="./hex_to_file.htm" TARGET="_self">HEX -&gt; file</a></li>
    <li><a href="./file_to_hex.htm" TARGET="_self">File -&gt; HEX</a></li>
    <li><a href="./file_to_base64.htm" TARGET="_self">File -&gt; Base64</a></li>    
    <li><a href="./html_list_gen.htm" TARGET="_self">Text -&gt; HTML ul</a></li>
    <li><a href="./crc8.htm" TARGET="_self">CRC8</a></li>
    <li><a href="./wave_gen.htm" TARGET="_self">WAVE generator</a></li>
    <li><a href="./bin_decoder.htm" TARGET="_self">Bin decoder</a></li>
    <li><a href="./rc4.htm" TARGET="_self">RC4</a></li>          
    <li><a href="./xor.htm" TARGET="_self">XOR</a></li>
    <li><a href="./inv.htm" TARGET="_self">Inverting bits</a></li>
    <li><a href="./par_resistors.htm" TARGET="_self">Par. resistors search</a></li>
    <li><a href="./unique_str.htm" TARGET="_self">Deduplicate / sort</a></li>        
    <li><a href="./base64_to_PEM.htm" TARGET="_self">Base64 -&gt; PEM</a></li>
    <li><a href="./PEM_to_base64.htm" TARGET="_self">PEM -&gt; base64</a></li>
    <li><a href="./diskstats.htm" TARGET="_self">/proc/diskstats</a></li>    
    </ul>
    </li> 


    <li><A HREF="../contact2.htm" TARGET="_self">Contact</A></li></ul>
<script type="text/javascript">
//<!--
new tree("tree0");
//-->
</script>

<br>  
<br>  
<br>  





  <br>    

        
    
</div>


<div id="footer">




  
</div>


<br>
<div id="footer2"><p>      
            <!-- <font size="-2">&nbsp;"Cookie monsters": 5583818&nbsp;&nbsp;&nbsp;&nbsp;Parse time:&nbsp;0.000 s</font> -->

  </p>
	</div>
</div>
</body>
</html>

